<template>
  <div class="app-container1">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" :inline="inline">
      <el-form-item label="学院" prop="collegeId">
        <el-select
          v-model="form.collegeId"
          placeholder="请选择学院"
          filterable
          clearable
          @change="collegeChange"
        >
          <el-option
            v-for="dict in collegeList"
            :key="dict.id"
            :label="dict.collegeName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="系部" prop="departmentsId">
        <el-select
          v-model="form.departmentsId"
          placeholder="请输入系部"
          filterable
          clearable
          @change="departmentChange"
        >
          <el-option
            v-for="dict in departmentsList"
            :key="dict.id"
            :label="dict.departmentName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="专业" prop="professionId">
        <el-select
          v-model="form.professionId"
          placeholder="请输入专业"
          filterable
          clearable
          @change="professionChange"
        >
          <el-option
            v-for="dict in professionsList"
            :key="dict.id"
            :label="dict.professionName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="班级"  prop="professionId">
        <el-select
          v-model="form.classesId"
          placeholder="请选择班级"
          filterable
          clearable
          @change="classesChange"
        >
          <el-option
            v-for="dict in classList"
            :key="dict.id"
            :label="dict.classesName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
import common from "@/api/collegebase/common";

export default {
  props: {
    inline: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        collegeId: [
          {required: true, message: '请选择学院', trigger: 'blur'},
        ],
        departmentsId: [
          {required: true, message: '请选择系部', trigger: 'blur'},
        ],
        professionId: [
          {required: true, message: '请选择专业', trigger: 'blur'},
        ],

      },
      collegeList: [],
      departmentsList: [],
      professionsList: [],
      classList: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    classesChange(classId) {
      // console.log(this.form)
      this.$emit('input', this.form);

    },
    validateForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return
        }

      })
    },
    //获取班级
    async professionChange(professionId) {
      this.$set(this.form, "classesId", "");
      const res = await common.getClassesList(professionId);
      this.classList = res.data;
    },

    //获取专业
    async departmentChange(departmentsId) {
      const departmentsList = await common.getProfessionsList(departmentsId);
      this.professionsList = departmentsList.data;
      this.classList = [];
      this.$set(this.form, "classesId", "");
      this.$set(this.form, "professionId", "");
    },
    //获取系部
    async collegeChange(collegeId) {
      // console.log(collegeId)
      const departmentsList = await common.getDepartmentsList(collegeId);
      this.departmentsList = departmentsList.data;
      this.professionsList = [];
      this.classList = [];

      this.$set(this.form, "classesId", "");
      this.$set(this.form, "professionId", "");
      this.$set(this.form, "departmentsId", "");
    },
    //获取学院
    async getData() {
      const collegeList = await common.getCollegesList();
      // console.log(collegeList)
      this.collegeList = collegeList.data;


    },
  }

}
</script>
